<template>
    <div>
        <el-row :gutter="12">
            <el-col :span="8">
                <el-card class="form-container" shadow="never">
                    <el-form :model="productTempFrom"
                             :rules="rules"
                             ref="productCateFrom"
                             label-width="150px">
                        <el-form-item label="模板名称：" prop="name">
                            <el-input v-model="productTempFrom.name"></el-input>
                        </el-form-item>
                        <el-form-item label="模板选项：" prop="specids">
                            <div class="block">
                                <span class="demonstration"></span>
                                <el-cascader
                                        :options="options"
                                        :props="props"
                                        clearable
                                @change="getids"></el-cascader>
                            </div>
                        </el-form-item>
                        <el-form-item label="模板支持品牌：" prop="brand">
                            <div class="block">
                                <span class="demonstration"></span>
                                <el-cascader
                                        :options="options2"
                                        :props="props"
                                        clearable
                                @change="getbrands"></el-cascader>
                            </div>
                        </el-form-item>
                        <el-form-item label="模板特殊支持：" prop="other">
                            <el-input v-model="productTempFrom.other"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "ProductTemplateAdd",
        data() {
            return {
                props: { multiple: true },
                options:[{
                    value: 1,
                    label: '东南',
                }],
                options2:[{
                    value: 1,
                    label: '东南',
                }],
                productTempFrom: {
                    name: '',
                    specids: '',
                    brand:'',
                    other:''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入模板名称', trigger: 'blur'},
                        {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
                    ],
                    specids: [
                        {required: true, message: '请选择模板选项', trigger: 'blur'},
                    ],
                    brand: [
                        {required: true, message: '请选择模板支持品牌', trigger: 'blur'},
                    ],

                },

            }
        },
        created(){
          this.getSpec();
          this.getBrand();
        },
        methods:{
            getSpec(){
                this.options=[];
                this.service.get("/product/manage/proSpecification/search.do").then(res=>{
                    if (res.data.status == 0){
                        console.log(res.data.data.list)
                        for (let i = 0;i<res.data.data.list.length;i++){
                            let spec={
                                value:'',
                                label:''
                            }
                            spec.value = res.data.data.list[i].id;
                            spec.label = res.data.data.list[i].specName
                            this.options.push(spec);
                        }
                    }
                })
            },
            getBrand(){
                this.options2=[];
                this.service.get("/product/manage/productBrand/search.do").then(res=>{
                    if (res.data.status == 0){
                        //console.log(res.data.data.list)
                        for (let i = 0;i<res.data.data.list.length;i++){
                            let brand={
                                value:'',
                                label:''
                            }
                            brand.value = res.data.data.list[i].id;
                            brand.label = res.data.data.list[i].name
                            this.options2.push(brand);
                        }
                    }
                })
            },
            onSubmit(){
                this.$confirm('是否提交数据', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.service.get("/product/manage/proTypeTemplation/add.do",{
                        params:{
                            name:this.productTempFrom.name,
                            specIds:this.productTempFrom.specids,
                            brandIds:this.productTempFrom.brand,
                            customAttributeItems:this.productTempFrom.other
                        }
                    }).then(res=>{
                        if (res.data.status==0){
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                                duration: 1000
                            });
                            this.$router.push({
                                name:'商品模板管理'
                            })
                        }else{
                            this.$message.error('添加失败,请重新添加!');
                        }
                    })
                })
            },
            getids(value){
                this.productTempFrom.specids='';
                for (let i = 0;i<this.options.length;i++){
                    for (let j=0;j<value.length;j++){
                        if (this.options[i].value == value[j]){
                            this.productTempFrom.specids =this.productTempFrom.specids+ this.options[i].label+',';
                        }
                    } 
                }
                this.productTempFrom.specids = this.productTempFrom.specids.substring(0,this.productTempFrom.specids.length-1)
            },
            getbrands(value){
                this.productTempFrom.brand='';
                for (let i = 0;i<this.options2.length;i++){
                    for (let j=0;j<value.length;j++){
                        if (this.options2[i].value == value[j]){
                            this.productTempFrom.brand =this.productTempFrom.brand+ this.options2[i].label+',';
                        }
                    }
                }
                this.productTempFrom.brand = this.productTempFrom.brand.substring(0,this.productTempFrom.brand.length-1)
            }
        },
    }
</script>

<style scoped>

</style>